@require './code'
@require './code-theme'
@require './custom-blocks'
@require './arrow'
@require './wrapper'
@require './toc'
@require './markdown-container'

html, body
  padding 0
  margin 0
  overflow-x hidden
body
  font-family Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-size 15px
  color var(--text-color)
  cursor url(/blogs/img/arrow.cur), auto !important
  background-color var(--background-color)
  background-image url(/blogs/img/bg.jpg)
.navbar
  position fixed
  z-index 999
  top 0
  left 0
  right 0
  height $navbarHeight
  box-sizing border-box

.sidebar-mask
  position fixed
  z-index 9
  top 0
  left 0
  width 100vw
  height 100vh
  display none
  background-color: rgba(0,0,0,.65);

.sidebar
  font-size 16px
  background-color var(--background-color)
  width $sidebarWidth
  position fixed
  z-index 120
  margin 0
  top $navbarHeight
  left 0
  bottom 0
  box-sizing border-box
  border-right 1px solid var(--border-color)
  overflow-y auto
  transform translateX(-100%)
  transition transform .2s
  @media (max-width: $MQMobile)
    background-color var(--background-color)

.content__default:not(.custom)
  @extend $wrapper
  a:hover
    text-decoration underline
  p.demo
    padding 1rem 1.5rem
    border 1px solid #ddd
    border-radius 4px
  img
    max-width 100%

.content__default.custom
  padding 0
  margin 0
  img
    max-width 100%

.abstract
  img
    max-width 100%

a
  font-weight 500
  color $accentColor
  text-decoration none

p a code
  font-weight 400
  color $accentColor

kbd
  background #eee
  border solid 0.15rem #ddd
  border-bottom solid 0.25rem #ddd
  border-radius 0.15rem
  padding 0 0.15em

blockquote
  font-size .9rem
  color #999
  border-left .25rem solid #999
  background-color var(--code-color)
  margin 0.5rem 0
  padding .25rem 0 .25rem 1rem
  & > p
    margin 0

ul, ol
  padding-left 1.2em

strong
  font-weight 600

h1, h2, h3, h4, h5, h6
  font-weight 500
  line-height 1.25
  .content__default:not(.custom) > &
    padding-top 1.4rem
    margin-bottom 1rem
    &:first-child
      margin-top (3.1rem - $navbarHeight)

h1
  font-size 1.6rem

h2
  font-size 1.4rem

h3
  font-size 1.2rem

a.header-anchor
  font-size 0.85em
  float left
  margin-left -0.87em
  padding-right 0.23em
  margin-top 0.125em
  opacity 0
  &:hover
    text-decoration none

code, kbd, .line-number
  font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace

p, ul, ol
  line-height 2.2

hr
  border 0
  border-top 1px solid var(--border-color)

table
  border-collapse collapse
  margin 1rem 0
  display: block
  overflow-x: auto

tr
  border-top 1px solid var(--border-color)
  &:nth-child(2n)
    background-color var(--code-color)

th, td
  border 1px solid var(--border-color)
  padding .6em 1em

.global-fixed-wrapper
  position fixed
  top $navbarHeight
  left 0
  width 100%
  height calc(100vh - 3.6rem)
  z-index 100
  background-color #fff

.text-center
  text-align center

.mb4
  margin-bottom .4rem

.theme-container
  &.sidebar-open
    .sidebar-mask
      display: block
  &.no-navbar
    .content__default:not(.custom) > h1, h2, h3, h4, h5, h6
      margin-top 1.5rem
      padding-top 0
    .sidebar
      top 0

@media (min-width: ($MQMobile + 1px))
  .theme-container.no-sidebar
    .sidebar
      display none
    .page, .password-wrapper-in
      margin-left 0

@require 'mobile.styl'

.iconfont
  font-family: "iconfont",Ubuntu,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif !important
  font-size: 13px;
  color: var(--text-color-sub);

/************** 滚动条 **************/
::-webkit-scrollbar
  width: 5px;
  height: 5px;

::-webkit-scrollbar-track-piece
  // background-color: rgba(0, 0, 0, 0.2);

::-webkit-scrollbar-thumb:vertical
  height: 5px;
  background-color: $accentColor;
  border-radius: 0.25rem;

::-webkit-scrollbar-thumb:horizontal
  width: 5px;
  background-color: $accentColor;
  border-radius: 0.25rem;

/*Webkit,Opera9.5+,Ie9+*/ 
::selection
  background $accentColor
  color #fff
/*Mozilla Firefox*/
::-moz-selection
  background $accentColor
  color #fff

.custom-page // 自定义页面
  min-height calc(100vh - 3.6rem)
  padding-top $navbarHeight
  padding-bottom .9rem
  .theme-vdoing-wrapper
    margin 0 auto

// 背景纹
.theme-vdoing-wrapper
  --linesColor rgba(50, 0, 0, 0.05)
  &.bg-style-1 // 方格
    background-image linear-gradient(90deg, var(--linesColor) 3%, transparent 3%), linear-gradient(0deg, var(--linesColor) 3%, transparent 3%)
    background-position center center
    background-size 20px 20px
  &.bg-style-2 // 横线
    background-image repeating-linear-gradient(0, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%)
    background-size 30px 30px
  &.bg-style-3 // 竖线
    background-image repeating-linear-gradient(90deg, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%)
    background-size 30px 30px
  &.bg-style-4 // 左斜线
    background-image repeating-linear-gradient(-45deg, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%)
    background-size 20px 20px
  &.bg-style-5 // 右斜线
    background-image repeating-linear-gradient(45deg, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%)
    background-size 20px 20px
  &.bg-style-6 // 点状
    background-image radial-gradient(var(--linesColor) 1px, transparent 1px)
    background-size 10px 10px
// 背景纹适应深色模式
html.dark
  .theme-vdoing-wrapper
    --linesColor rgba(125, 125, 125, 0.05)

/************** 流程图的滚动条 **************/
.vuepress-flowchart
  overflow: auto

/************** SW-Update Popup **************/

.sw-update-popup
  border-radius: $borderRadius!important;
  box-shadow: var(--box-shadow)!important;
  color: var(--text-color)!important;
  background: var(--background-color)!important;
  border: none!important;
  > button
    background: $accentColor;
    border-radius: $borderRadius;
    color: #fff;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0)
    border: none;

//  aplayer 音乐播放
.aplayer.aplayer-withlist
  .aplayer-body
    .aplayer-info
      .aplayer-music
        .aplayer-title, .aplayer-author
          color $accentColor
      .aplayer-controller
        .aplayer-bar
          background-color #eee
          .aplayer-played
            background-color $accentColor !important
            .aplayer-thumb
              background-color $accentColor !important
          .aplayer-loaded
            background-color #bbb
  .aplayer-list
    &::-webkit-scrollbar-thumb
      height 1rem
      background-color $accentColor
    .aplayer-list-cur
      background-color $accentColor !important
    .aplayer-list-title
      color $accentColor
    .aplayer-list-index
      font-weight 600
      color #7f7f7f
    .aplayer-list-author
      color #242424

/************** global-ui **************/
.global-ui
  // back-to-ceiling
  .back-to-ceiling
    border-radius 50% !important
    &:hover
      box-shadow var(--box-shadow-hover)
  
